<template>

  <div class="mui-numbox" data-numbox-min="1" >
    <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
    <input id="test" class="mui-input-numbox" type="number" :value="initcount" @change="countChanged" ref="numbox" readonly/>
    <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
  </div>
</template>



<script>
// 引入mui.js文件
import mui from "../../lib/mui/js/mui.min.js";
export default {
  data() {
    return {};
  },
  mounted() {
    mui(".mui-numbox").numbox();
    // console.log(this.max)
  },
  methods:{
   countChanged(){
    //  console.log(this.$refs.numbox.value)
    this.$store.commit('updateGoodsCount',{
      id: this.goodsid, count:this.$refs.numbox.value
    })
   }
  },
  props: ["initcount","goodsid"],
  // 添加change事件，当输入框中的数字发生改变时，首先获取这个值，并通过在store中循环遍历根据id找到对应的商品项，将原有的
  // 商品的数量设置成输入框改变后的值
  
};
</script>

<style lang="scss" scoped>
  .mui-numbox{
    height: 25px;
    width: 110px;
    .mui-btn {
      width: 40px;
    }
  }
</style>